iT邦幫忙

2026 iThome 鐵人賽

DAY 19
0

接續上一篇的內容,今天會繼續介紹另外三項工具型別:

  • Pick<T, K>
  • Omit<T, K>
  • Record<K, T>

順帶一提,還記得之前介紹泛型約束時提到的keyof嗎?當時我們看過K extends keyof T,代表K必須是T裡面的鍵。這個概念也會出現在Pick<T, K>Omit<T, K>中,那Record<K, T>?先賣個關子吧。


1. Pick<T, K>

顧名思義,Pick<T, K>就是在T型別中挑選需要的屬性K(可以是複數屬性)。

//假設這是一個會員的完整資訊:
interface Member {
	name: string;
	id: number;
	phoneNum: string;
	age: number;
	email: string;
	password: string;
}

//我們只需要物件的重點資訊時,可以使用Pick型別
type MemberInfo = Pick<member, "name" | "id"> 
//K欄位可以使用聯合型別寫上需要的屬性

//此時的member介面可以想像成這樣:
//interface Member {
//	name: string;
//	id: number;
//}

//這裡的name和id都是必要屬性,少任何一個都會報錯喔!
const member_1: MemberInfo = {
	name: "Panda5566";
	id: 12334567213435;
}

2. Omit<T, K>

Omit<T, K>Pick<T, K>的概念相反,如果說Pick是從箱子挑幾個需要的物品取出,那Omit就是從箱子拿出幾個物品剔除它們,只留箱子內需要的東西。Omit常用在建立或更新資料時,將不希望使用者提供或修改的屬性排除。

interface Member {
	name: string;
	id: number;
	phoneNum: string;
	age: number;
	email: string;
	password: string;
}
//Omit也能夠使用聯合型別選擇要剔除的屬性
type MemberInfo = Omit<member, "id" | "phoneNum">;

//此時的member型別長這樣:
//interface member {
//	name: string;
//	age: number;
//	email: string;
//	password: string;
//}

const member_2: MemberInfo = {
	name: "Teddy";
	age: 20;
	email: "123gmail.com";
	password: 123;
}

3. Record<K, T>

Record<K, T>和Pick、Omit都不一樣,它會建立一個具有指定鍵值對的物件型別,這裡的K代表物件屬性,而T是屬性的值。Record常用在記錄相同型別資料時使用,像成績單、商品庫存等等。

type Scores = Record<string, number>;

const scores: Scores = {
	Tom: 80,
	Mary: 90,
	John: 75
};

Record也能用聯合型別指定K必須要有的屬性:

type Major = "程式設計" | "演算法" | "資料結構";

type Scores = Record<major, number>;

const studentGrades: Scores = {
	程式設計: 90,
	演算法: 80,
	資料結構: 85
} //Record會嚴格遵守型別規範,如果今天將分數寫成字串,或是屬性缺一多一,都會讓TS報錯

小結

今天也把剩下三個工具型別介紹完了,來稍微統整一下吧!

  • Pick<T, K>:從物件中挑選指定屬性。
  • Omit<T, K>:從物件中踢掉指定屬性。
  • Record<K, T> :建立指定鍵值對物件。

明天會來談談之前在型別收窄提到的typeof以及在泛型約束補充到的keyof兩者之間的差別,還有來談談何謂Type Query?


上一篇
[Day-18]Utility Types-1
下一篇
[Day-20]Type Query
系列文
從零開始學習TypeScript:菜鳥的入門介紹與概覽22
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言